import React, { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";

import { Breadcrumb } from "antd";
import { HomeOutlined, UserOutlined } from "@ant-design/icons";

export default function Mybread() {
  let [curTitle, setCurTittle] = useState("");

  const { pathname } = useLocation();
  let mapTitle = {
    "/list": "文章列表",
    "/edit": "文章编辑",
    "/personal": "个人中心",
  };
  useEffect(() => {
    setCurTittle(mapTitle[pathname]);
  }, [pathname]);
  return (
    <Breadcrumb>
      <Breadcrumb.Item href="/">
        <HomeOutlined />
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        <UserOutlined />
        <span>{curTitle}</span>
      </Breadcrumb.Item>
    </Breadcrumb>
  );
}
